<template>
  <div class="icons">
    <swiper :options="swiperOptions">
      <swiper-slide  v-for='(item,key) in page' :key='key'>
        <div class="icon-item" v-for='page in item' :key='page.id'>
          <div class="icon-img">
            <img class="icon-img-content" :src="page.imgUrl" alt="">
          </div>
          <p class="icon-desc">{{page.title}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script type="text/javascript">
  export default {
    name: 'HomeIcons',
    data() {
      return {
        swiperOptions: {
        },
        iconsList: [
          {
            id: "01",
            imgUrl: require('@/assets/images/icon1.png'),
            title: "跟团游"
          },
          {
            id: "02",
            imgUrl: require('@/assets/images/icon2.png'),
            title: "自由行"

          },
          {
            id: "03",
            imgUrl: require('@/assets/images/icon3.png'),
            title: "定制旅行"
          },
          {
            id: "04",
            imgUrl: require('@/assets/images/icon4.png'),
            title: "私家团"
          },
          {
            id: "05",
            imgUrl: require('@/assets/images/icon5.png'),
            title: "邮轮游"
          },
          {
            id: "06",
            imgUrl: require('@/assets/images/icon6.png'),
            title: "周边游"
          },
          {
            id: "07",
            imgUrl: require('@/assets/images/icon7.png'),
            title: "一日游"
          },
          {
            id: "08",
            imgUrl: require('@/assets/images/icon8.png'),
            title: "景点·门票"
          },
          {
            id: "09",
            imgUrl: require('@/assets/images/icon9.png'),
            title: "鸿鹄·奢游"
          },
          {
            id: "10",
            imgUrl: require('@/assets/images/icon10.png'),
            title: "向导·包车"
          }
        ]
      }
    },
    computed:{
      page: function () {
        let pages=[];
        this.iconsList.forEach((item,index)=>{ //item当前元素，index索引值
          let idx = Math.floor(index/10);
          if(!pages[idx]) pages[idx] = [];
          pages[idx].push(item)
        });
        console.log(pages.length)
        return pages;
      }
    }
  }
</script>
<style>
  .icons {
    width: 100%;
    height: 0;
    padding-bottom:45%;
    overflow: hidden;
  }
  .icon-item {
    position: relative;
    overflow: hidden;
    float: left;
    height: auto;
    width: 20%;
    text-align: center;
  }
  .icon-img {
    width: 100%;
  }
  .icon-img img {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 auto;
  }
  .icon-desc {
    font-size: 0.24rem;
    color: #222222;
  }
</style>
